/* 静态属性 */
@h:100%;
/* 主体颜色 */
@headColor:'#3e75c7';   //头部深蓝色
@bgColor:'#508ae0';     //背景浅蓝色
@focusColor:'#ce2f3b';  //标记红色
@lineColor:'#ebebeb';   //线条颜色（灰色）
@titBgColor:'#eee';     //标题背景色（灰色）
@fontColor:'#999';      //字体颜色（灰色）

/* 字体 */
@fontSize:'14px';       //默认初始字体大小


/* 常用方法 */

//圆角（参数：圆角大小）
.border-radius(@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    border-radius: @radius;
}

//阴影（参数：x，y，模糊像素，透明度）
.box-shadow(@x: 0px, @y: 3px, @blur: 5px, @alpha: 0.5) {
    -webkit-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    -moz-box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
    box-shadow: @x @y @blur rgba(0, 0, 0, @alpha);
}

//过渡（参数：属性名，时间，效果）
.transition(@prop: all, @time: 1s, @ease: linear) {
    -webkit-transition: @prop @time @ease;
    -moz-transition: @prop @time @ease;
    -o-transition: @prop @time @ease;
    -ms-transition: @prop @time @ease;
    transition: @prop @time @ease;
}

//旋转（参数：旋转角度，绽放比例，倾斜转换角度，平衡像素）
.transform(@rotate: 90deg, @scale: 1, @skew: 1deg, @translate: 10px) {
    -webkit-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -moz-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -o-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    -ms-transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
    transform: rotate(@rotate) scale(@scale) skew(@skew) translate(@translate);
}

//渐变（参数：渐变方向，开始颜色，结束颜色）
.gradient(@origin: left, @start: #ffffff, @stop: #000000) {
    background-color: @start;
    background-image: -webkit-linear-gradient(@origin, @start, @stop);
    background-image: -moz-linear-gradient(@origin, @start, @stop);
    background-image: -o-linear-gradient(@origin, @start, @stop);
    background-image: -ms-linear-gradient(@origin, @start, @stop);
    background-image: linear-gradient(@origin, @start, @stop);
}

//镜像（参数：长度，透明度）
.reflect(@length: 50%, @opacity: 0.2){
    -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, 
        left bottom, from(transparent), 
        color-stop(@length, transparent), to(rgba(255,255,255,@opacity)));
}

//三角形
.triangle(@size: 10px, @color: #000, @type: up) when (@type = up){
    width: 0;
    border-color: transparent transparent @color transparent;
    border-width: 0 @size @size @size;
    border-style: solid;
}